<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form class="queryForm" :inline="true" label-width="0" :model="form">
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="参数名" />
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="form.type"
            placeholder="运转情况"
            size="small"
            clearable
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="form.test" placeholder="测试情况" size="small">
            <el-option
              v-for="item in testOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="form.dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @look="lookData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" ref="dialog"/>
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add,
  },
  mixins: [vxeLableJs],
  data() {
    return {
      typeOptions: [
        {
          value: "1",
          label: "类型1",
        },
        {
          value: "2",
          label: "类型2",
        },
        {
          value: "3",
          label: "类型4",
        },
        {
          value: "4",
          label: "类型4",
        },
      ],
      testOptions: [
        {
          value: "1",
          label: "失败",
        },
        {
          value: "2",
          label: "成功",
        },
        {
          value: "3",
          label: "运行中",
        },
      ],
      form: {
        name: "",
        type: "",
        test: "",
        dateTime: "",
      },
      dialog: {
        show: false,
        title: "详情",
        width: "30%",
      },
      tableConfig: {
        api: "",
        height: 700,
        operateBtns: [
          { emit: "look", name: "查看", type: "primary" },
          { emit: "edit", name: "编辑", type: "primary" },
          {
            emit: "stop",
            name: "暂停",
            type: "primary",
            parameter: "state",
            value: 1,
          },
          {
            emit: "stop",
            name: "恢复",
            type: "primary",
            parameter: "state",
            value: 3,
          },
          { emit: "del", name: "删除", type: "danger" },
        ],
        tableData: [
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            executeMethod: "",
            state: 0,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 1,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 2,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 3,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 0,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 2,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 0,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 3,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 3,
          },
          {
            id: 1,
            apiName: "数据表任务1",
            apiUrl: "此数据源用...",
            apiDesc: "xxx数据源",
            apiType: "500/1000",
            enabled: "8小时5分钟",
            createTime: "2022-01-22  12:24:34",
            executeClass: "2022-01-05 15:31:39",
            state: 1,
          },
        ],
        tablePage: true,
        tableToolbar: {
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons",
          },
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { field: "apiName", title: "任务名称" },
          { field: "apiUrl", title: "任务说明" },
          { field: "apiDesc", title: "所属数据源" },
          { field: "apiType", title: "已同步/应同步" },
          { field: "enabled", title: "运行时长" },
          { field: "createTime", title: "开始时间", sortable: true },
          { field: "executeClass", title: "结束时间", sortable: true },
          // { field: "executeMethod", title: "创建时间", sortable: true },
          {
            field: "state",
            title: "运行状态",
            align: "center",
            slots: {
              default: ({ row }, h) => {
                var name = "";
                var type = "";
                switch (row.state) {
                  case 0:
                    name = "未运行";
                    type = "warning";
                    break;
                  case 1:
                    name = "运行中";
                    type = "";
                    break;
                  case 2:
                    name = "已完成";
                    type = "success";
                    break;
                  case 3:
                    name = "已停止";
                    type = "danger";
                    break;
                }
                return [
                  h(
                    "el-tag",
                    {
                      props: {
                        type: type,
                        effect: "plain",
                      },
                    },
                    name
                  ),
                ];
              },
            },
          },
          {
            title: "操作",
            width: 250,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right",
          },
        ],
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() {
    this.getTableHeight();
  },
  methods: {
    lookData(row) {
      this.dialog.show = true;
      this.$nextTick(() => {
        this.dialog.title = "详情";
        this.$refs.dialog.init(row, true);
      });
    },
    reset() {
      this.form = {
        name: "",
        type: "",
        test: "",
        dateTime: "",
      };
    },
    close() {
      this.dialog.show = false;
    },
    aaa(row) {
      console.log(row);
    },
    editData(row) {
      this.dialog.title = "查看";
      this.dialog.show = true;
      this.$nextTick(() => {
        this.dialog.title = "编辑";
        this.$refs.dialog.init(row, true);
      });
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addData() {
      console.log("新增add");
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent((files) => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/menu/list"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: "post",
            data: this.$http.adornData(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.queryData {
  font-size: 0.14rem;
  color: #fff;
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
